<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习 - 动画次序</title>
  <style>
    body {
      padding: 0 40px;
      color: #333;
    }

    .demo {
      width: 200px;
      height: 100px;
      background-color: pink;

      animation: move 5s 2 alternate;
    }

    @keyframes move {
      from {
        width: 200px;
      }

      25% {
        width: 400px;
        height: 100px;
        background-color: pink;
        transform: translate(0px);
      }

      50% {
        width: 400px;
        height: 200px;
        background-color: pink;
        transform: translate(0px);
      }

      75% {
        width: 400px;
        height: 200px;
        background-color: red;
        transform: translate(0px);
      }

      100% {
        width: 400px;
        height: 200px;
        background-color: red;
        transform: translate(400px);
      }
    }

    .box {
      width: 120px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      border-radius: 8px;
      margin-top: 50px;
      color: #fff;
      background-color: #5cb85c;

      /* animation: slide 5s; */
    }

    @keyframes slide {
      10% {
        background-color: #5bc0de;
        transform: rotate(15deg);
      }

      30% {
        background-color: #5bc0de;
        transform: translate(500px) rotate(15deg);
      }

      100% {
        transform: translate(0px) rotate(-360deg);
      }
    }
  </style>
</head>
<body>
  <h3>控制动画执行的次序</h3>

  <div class="demo"></div>
  
  <div class="box">CSS 动画</div>
</body>
</html>